<!-- Dom模板 -->
<template>
    
  <div class="juan">
        <!-- Dom内容 -->
        
    <div class="popBack">
      <p>优惠卷 / 添加优惠卷</p>
      <el-row>
        <el-button
          type="primary"
          style="background: #38a28a"
          @click="closePop"
          >返回</el-button
        >
      </el-row>
    </div>
    <div class="popCon">
      <el-form label-width="100px" class="demo-ruleForm" label="使用范围">
        <el-form-item label="活动区域" :rules="[{ required: true }]">
          <el-input style="width: 300px" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷数量" :rules="[{ required: true }]">
          <el-input style="width: 300px" v-model="ruleForm.num"></el-input>张
        </el-form-item>
        <el-form-item label="优惠卷面额" :rules="[{ required: true }]">
          <el-input style="width: 300px" v-model="ruleForm.faceValue"></el-input
          >元
        </el-form-item>
        <el-form-item label="使用门槛" :rules="[{ required: true }]">
          <el-radio-group v-model="ruleForm.door"
            >
            <input :checked="ruleForm.door" @inut="ruleForm.door = !ruleForm.door" type="radio" />无门槛
          </el-radio-group>
          <el-radio-group v-model="ruleForm.useDoor" marginLeft="20px"
            >满
            <el-input style="width: 300px" v-model="ruleForm.useDoor"></el-input>元
            可用
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用范围" :rules="[{ required: true }]">
          <el-radio-group
            v-model="ruleForm.class"
            :rules="[{ required: true }]"
          >
            <el-radio :label="0">所有课程</el-radio>
            <el-radio :label="1">指定课程</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="有效期"
          prop="ruleForm.time"
          :rules="[{ required: true }]"
        >
          <el-radio-group v-model="ruleForm.expiry">
            <el-radio :label="0">日期范围</el-radio>
          </el-radio-group>
          <el-date-picker
            v-model="ruleForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-radio-group
            v-model="ruleForm.class"
            :rules="[{ required: true }]"
          >
            <el-radio :label="1">指定课程</el-radio>
            <el-input style="width: 300px" v-model="ruleForm.day"></el-input>
          </el-radio-group>
          天
        </el-form-item>
        <div class="btn">
          <el-row>
            <el-button type="primary" style="background: #38a28a"
              @click="addData"
              >添加优惠</el-button
            >
          </el-row>
          <el-row>
            <el-button
              type="primary"
              style="background: #eaeaea; color: black"
              @click="closePop"
              >取消</el-button
            >
          </el-row>
        </div>
      </el-form>
    </div>
      
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      ruleForm: {
        //弹框
        title:'',
        type: "",
        num: "",
        faceValue: "", //面额
        door: false,
        useDoor: "", //使用门槛
        range: false,
        useRange: "", //使用范围
        expiry: false,
        expiryDate: "", //有效期
        class: false,
        day: 0, //天数
      },
    };
  },
  // 接收参数
  props: ["closePop"],
  // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
  methods: {
    addData(){
      // 添加数据
      this.ruleForm.useRange = this.ruleForm.range ? '所有课程':"指定课程";
      this.ruleForm.expiryDate = this.ruleForm.time[this.ruleForm.time.length -1].toLocaleString()
      console.log(this.ruleForm,'优惠卷添加数据');
    }
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */

/* 弹框 */
.juan{
  width: calc(100% - 200px );
  height: calc(100% - 60px);
  box-sizing: border-box;
  padding: 0 20px;
  position: fixed;
  left: 200px;
  top: 60px;
  background: #eaeaea;
  z-index: 99;
}
.popBack {
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  box-sizing: border-box;
}
.popCon {
  height: 80%;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  overflow: auto;
}
.popCon form > div {
  margin-top: 10px;
}
.btn {
  width: 100%;
  display: flex;
}
.btn button {
  margin: 10px;
}
</style>